
import React from 'react'
import './personal.css'
import { Button } from 'element-react'
import { Tabs, WhiteSpace, Badge } from 'antd-mobile';
import { NavLink } from 'react-router-dom';
import { ActivityIndicator } from 'antd-mobile'
// import 'element-theme-default'

class PersonalPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            topics:[],
            articles:[],
            buttype:'primary',
            buttxt:'+关注',
            flag:0,
            guan:[],
            disabled: false,
            item: '',
            isShow: true
        }
    }
    componentDidMount(){
        let url = 'http://62.234.30.197:8088/topics/idcha';
        fetch(url, {
             method: 'POST',
            body: JSON.stringify({
                userid: this.props.location.state.item.userid
            }),
            headers: {
                "Access-Control-Allow-Origin":"*",
                'content-type': 'application/json'
            },
            mode: 'cors'
        })
        .then(res => res.json())
        .then(res => this.setState({
            topics: res
        }))
        // .then(res=>console.log(this.state.topics))
        let url1 = 'http://154.8.202.56:8081/articlelist/idcha';
        fetch(url1, {
             method: 'POST',
            body: JSON.stringify({
                userid: this.props.location.state.item.userid
            }),
            headers: {
                "Access-Control-Allow-Origin":"*",
                'content-type': 'application/json'
            },
            mode: 'cors'
        })
        .then(res => res.json())
        .then(res => this.setState({
            articles: res,
            
        }))
        // .then(res => console.log(this.state.articles))

        let url2 = 'http://62.234.30.197:8088/guan/idcha';
        fetch(url2, {
             method: 'POST',
            body: JSON.stringify({
                userid: localStorage.getItem("userid")
            }),
            headers: {
                "Access-Control-Allow-Origin":"*",
                'content-type': 'application/json'
            },
            mode: 'cors'
        })
        .then(res => res.json())
        .then(res => this.setState({
            guan: res
        }))
        .then(res => {
            // console.log(this.state.guan)
            for(let i = 0; i < this.state.guan.length; i ++){
                if(this.state.guan[i].userid == this.props.location.state.item.userid){
                    this.setState({
                        buttype: 'text',
                        buttxt:'已关注',
                        flag: 1
                    });
                    // console.log('yiguanzhu')
                    break;
                }
            }
            this.setState({
                isShow: false
            })
            
        })

        if(this.props.location.state.item.userid == localStorage.getItem("userid")){
            this.setState({
                buttype: 'text',
                buttxt:'',
                flag: 1,
                disabled: true
            })
        }
        this.setState({
            item: this.props.location.state.item
        })
    }
    render() {
        // console.log(this.props.location.state.item);
        // let item = this.props.location.state.item;

        const toGuan= (id1, id2) => {
            let url = 'http://154.8.202.56:8081/user/guan';
            fetch(url, {
                method: 'POST',
                body: JSON.stringify({
                    id1: id1,
                    id2: id2
                }),
                headers: {
                    "Access-Control-Allow-Origin":"*",
                    'content-type': 'application/json'
                },
                mode: 'cors'
            })
        }
        const leaveGuan= (id1, id2) => {
            let url = 'http://154.8.202.56:8081/user/quguan';
            fetch(url, {
                method: 'POST',
                body: JSON.stringify({
                    id1: id1,
                    id2: id2
                }),
                headers: {
                    "Access-Control-Allow-Origin":"*",
                    'content-type': 'application/json'
                },
                mode: 'cors'
            })
        }

        const tabs = [
            { title: <Badge>随笔</Badge> },
            { title: <Badge>文章</Badge> },
        ];
        let item = this.state.item;
<<<<<<< HEAD
        //console.log(item)
=======
        console.log(item)
>>>>>>> 429ee6d905019f594144cf938b04d544385572a3
        return (
            <div className="body_div"> 
                <ActivityIndicator 
                    toast
                    text="加载中..."
                    animating={this.state.isShow}
                />
                <div className="top_div" style={{
                    'height': '240px',
                    width: '100%',
                    backgroundSize: '100% 100%',
                    position:'relative',
                    color: 'black',
                    zIndex:10
                }}>
                    <button onClick={() => this.props.history.goBack()} className="top_button">&lt;</button>
                    <img className="user_pic" src={item.pic} alt=""/>

                    <p>{item.name}</p>
                    <div>
                        <p>关注{item.attentions==null?0:item.attentions}&nbsp;|&nbsp;粉丝{item.fans==null?0:item.fans}</p>
                    </div>
                    <div className="signature_div">
                        <p>{item.signature}</p>
                    </div>
                    <Button type={this.state.buttype} style={{
                        width: '120px',
                        height: '35px',
                    }} disabled={
                        this.state.disabled
                    } onClick={()=>{
                        if(this.state.flag == 0){
                            toGuan(localStorage.getItem("userid"), item.userid)
                            let it = item;
                            // it.attentions ++;
                            it.fans ++;
                            this.setState({
                                buttype: 'text',
                                buttxt:'已关注',
                                flag: 1,
                                item: it
                                // item.attentions:item.attentions+1,
                            })
                            
                        } else{
                            leaveGuan(localStorage.getItem("userid"), item.userid);
                            let it = item;
                            // it.attentions --;
                            it.fans --;
                            this.setState({
                                buttype: 'primary',
                                buttxt:'+关注',
                                flag: 0,
                                item: it
                            })
                        }
                            
                        // console.log(this)
                    }}>{this.state.buttxt}</Button>
                </div>
                <img src={item.pic} alt="" style={{width:'100%',height:'240px',position:'absolute',top:'0',left:'0',zIndex:5, opacity:'0.7'}}/>
                
                <div style={{width:'100%', textAlign:'center'}}>
                    <Tabs tabs={tabs}
                        initialPage={0}
                        swipeable={false}
                    >
                        <div style={{backgroundColor: '#fff',width:'100%'}}>
                            {
                                this.state.topics.map((item, idx) => (
                                    <NavLink key={idx} to={{pathname:'/notemsg/:' + item.topicsid, state: {item:item}}}>
                                        <li className="topics_li">
                                            <img src={item.pic} alt="pic" />
                                            <p className="topic_p">{item.txt}</p>
                                            <p className="date_p">{item.writedate}</p>
                                            <div className="i_div">
                                                <p>喜欢{item.likecount}</p>
                                            </div>
                                        </li>
                                    </NavLink>
                                ))
                            }
                        </div>
                        <div style={{backgroundColor: '#fff',width:'100%'}}>
                            {
                                this.state.articles.map((item, idx) => (
                                    <NavLink key={idx} to={{pathname:'/Detail/:' + item.articleid, state: {item:item}}}>
                                        <li className="article_li">
                                            <img src={item.pic} alt="pic" />
                                            <p className="article_p">{item.content}</p>
                                            {/* <p className="date_p">{item.deliverdate}</p> */}
                                            {/* <div className="i_div">
                                                <p>喜欢{item.thumb}</p>
                                            </div> */}
                                        </li>
                                    </NavLink>
                                ))
                            }
                        </div>
                    </Tabs>
                    <WhiteSpace />
    
                </div>
            </div>
        )
    }
}

export default PersonalPage







// let url = 'http://62.234.30.197:8088/guan/idcha';
//         fetch(url, {
//              method: 'POST',
//             body: JSON.stringify({
//                 userid: this.props.location.state.item.userid
//             }),
//             headers: {
//                 "Access-Control-Allow-Origin":"*",
//                 'content-type': 'application/json'
//             },
//             mode: 'cors'
//         })
//         .then(res => res.json())
//         .then(res => this.setState({
//             guan: res
//         }))
//         let url1 = 'http://62.234.30.197:8088/fen/idcha';
//         fetch(url1, {
//              method: 'POST',
//             body: JSON.stringify({
//                 userid: this.props.location.state.item.userid
//             }),
//             headers: {
//                 "Access-Control-Allow-Origin":"*",
//                 'content-type': 'application/json'
//             },
//             mode: 'cors'
//         })
//         .then(res => res.json())
//         .then(res => this.setState({
//             fen: res
//         }))